<template>
  <div>
    <el-dialog :visible.sync="modal" title="题目详情" width="70%" custom-class="custom-dialog-style">
      <el-form :model="addData" style="width: 100%; margin-bottom: 80px;" label-width="70px" class="demo-ruleForm"
        :rules="rules" ref="addData">
        <el-form-item label="培训类型" prop="trainingType">
          <el-cascader
            :show-all-levels="false"
            :options="options"
            style="width: 500px"
            v-model="addData.selected_type_ids"
            :props="{ multiple: true, checkStrictly: true }"
            @change="handleChange"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-radio v-model="addData.type" :label="1">单选题</el-radio>
          <el-radio v-model="addData.type" :label="2">多选题</el-radio>
          <el-radio v-model="addData.type" :label="3">判断题</el-radio>
        </el-form-item>
        <el-form-item label="题目内容" prop="title">
          <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入题目内容" v-model="addData.title">
          </el-input>
        </el-form-item>
        <el-form-item label="选项A" prop="a">
          <el-input placeholder="请输入" v-model="addData.a" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="选项B" prop="b">
          <el-input placeholder="请输入" v-model="addData.b" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="选项C">
          <el-input placeholder="请输入" v-model="addData.c" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="选项D">
          <el-input placeholder="请输入" v-model="addData.d" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="选项E">
          <el-input placeholder="请输入" v-model="addData.e" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="选项F">
          <el-input placeholder="请输入" v-model="addData.f" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="题目答案" prop="answer">
          <el-select v-model="addData.answer" placeholder="请选择" multiple style="width: 500px">
            <el-option label="选项A" :value="'A'">选项A</el-option>
            <el-option label="选项B" :value="'B'">选项B</el-option>
            <el-option label="选项C" :value="'C'">选项C</el-option>
            <el-option label="选项D" :value="'D'">选项D</el-option>
            <el-option label="选项E" :value="'E'">选项E</el-option>
            <el-option label="选项F" :value="'F'">选项F</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目解析" prop="desc">
          <div ref="editorContainer" id="editorContainer" style="width: 100%"></div>
        </el-form-item>
      </el-form>
      <div
        class="dialog-footer"
        style="
          position: absolute;
          bottom: 0;
          width: 100%;
          text-align: center;
          height: 50px;
          line-height: 50px;
          z-index: 99999;
          background-color: #ffffff;
          border-top: 1px solid #e6e6e6;
        "
      >
        <el-button @click="modal = false">关闭</el-button>
        <el-button type="primary" @click="submit('addData')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import E from 'wangeditor';
import request from '@/libs/request';

export default {
  name: 'addQuestion',
  filters: {},
  data() {
    return {
      modal: false,
      addData: {
        id: '',
        title: '',
        type_ids: [],
        selected_type_ids: [],
        type: 1,
        a: '',
        b: '',
        c: '',
        d: '',
        e: '',
        f: '',
        answer: [],
        desc: '',
      },
      rules: {
        a: [{ required: true, message: '选项A必填', trigger: 'blur' }],
        b: [{ required: true, message: '选项B必填', trigger: 'blur' }],
        answer: [{required: true, message: '请选择题目答案', trigger: 'blur'}],
      },
      options: [],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    showModal(id = '') {
      this.addData.id = id;
      this.modal = true;
      this.getInfo();
      this.$nextTick(() => {
        this.init();
      });
    },
    hideModal() {
      this.modal = false;
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addData.desc = this.phoneEditor.txt.html();
          let loading = this.$loading();
          request({
            url: '/question/save',
            data: this.addData,
            method: 'post',
          })
            .then((res) => {
              this.$message.success('操作成功');
              this.modal = false;
              loading.close();
              this.$parent.getList();
            })
            .catch((err) => {
              this.$message.error(err.msg);
              loading.close();
            });
        } else {
          // this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    getInfo() {
      let loading = this.$loading();
      request({
        url: '/question/info',
        method: 'post',
        data: this.addData,
      })
        .then((res) => {
          loading.close();
          if (this.addData.id) {
            this.addData = res.data.data;
            this.phoneEditor.txt.html(this.addData.desc);
            this.$refs['addData'].clearValidate()
          } else {
            this.addData = {
              id: '',
              title: '',
              type_ids: [],
              selected_type_ids: [],
              type: 1,
              a: '',
              b: '',
              c: '',
              d: '',
              e: '',
              f: '',
              answer: [],
              desc: '',
            };
            this.$refs['addData'].clearValidate()
            this.phoneEditor.txt.html('');
          }
          this.options = res.data.trainTypes;
        })
        .catch((err) => {
          loading.close();
          this.$message.error(err.msg);
        });
    },
    handleChange(value) {
      if (value) {
        this.addData.type_ids = value.map((item) => {
          return item[item.length - 1];
        });
      }
    },
    init() {
      if (this.phoneEditor) return;
      this.phoneEditor = new E('#editorContainer');
      this.phoneEditor.config.menus = [
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        'todo',
        'justify',
        'quote',
        'emoticon',
        'table',
        'splitLine',
        'undo',
        'redo',
      ];
      // 上传图片到服务器，base64形式
      this.phoneEditor.config.excludeMenus = ['video', 'code'];
      this.phoneEditor.config.uploadImgShowBase64 = true;
      // // 隐藏网络图片
      this.phoneEditor.config.showLinkImg = false;

      this.phoneEditor.config.debug = true;
      //图片上传接口
      this.phoneEditor.config.uploadImgServer = ''; // 上传图片的接口地址
      this.phoneEditor.config.uploadFileName = 'image'; // formdata中的name属性，比如现在是将图片image加入到formdate，后台从image中接收到图片数据
      this.phoneEditor.config.uploadImgHeaders = {
        token: sessionStorage.getItem('token'), // 设置请求头
      };
      this.phoneEditor.config.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
          console.log('成功', result);
        },
      };
      // 创建一个富文本编辑器
      this.phoneEditor.create();
      // 修改的时候，需要富文本内容回显，则需要加入以下代码
      // this.phoneEditor.txt.html(this.content);
      this.phoneEditor.config.onchange = (html) => {
        this.info_ = html; // 绑定当前逐渐地值
        // this.$emit('change', this.info_); // 将内容同步到父组件中
      };
    },
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  padding-bottom: 0px;
}

.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}

.input > span {
  font-size: 12px;
  flex-shrink: 0;
}

.btn {
  margin-bottom: 20px;
}

.box {
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
}

.action {
  display: flex;
  align-items: center;
  justify-content: center;
}

.action span {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}

.add_option {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.add_option_icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-right: 10px;
}

.add_option_a {
  font-size: 12px;
  margin-right: 20px;
}

#editorContainer /deep/ .w-e-text-container {
  height: 150px !important;
}
</style>
<style>
.custom-dialog-style .el-dialog__body {
  height: 70vh;
}
</style>